<template>
  <div>
    <h3 v-if="!repoName">loading...</h3>
    <p v-else>
      most star repo is <a :href="repoUrl">{{repoName}}</a>
    </p>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data () {
    return {
      repoName: '',
      repoUrl: ''
    }
  },

  // 初始化发送ajax请求
  async mounted () {
    // 发ajax请求获取数据
    const response = await axios.get('/dev-api/search/repositories',{
      params: {
        q: 'v',
        sort: 'stars'
      }
    })
    // 读取数据
    const result = response.data
    const {name, html_url} = result.items[0]
    // 更新数据
    this.repoName = name
    this.repoUrl = html_url
  }
}
</script>

<style scoped>

</style>
